<template>
        <Modal title="未分配人员" :transfer=false  v-model="userForSelectModal"  :width=900 @on-cancel="modelClose"><!--footer-hide-->
        <Form ref="form2" :model="form2" :label-width="100">
            <Row>
                <Col span="8">
                    <FormItem label="姓名：">
                        <Input type="text" v-model="form2.userName" style="width: 100%"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="登录账号：">
                        <Input type="text" v-model="form2.loginId" style="width: 100%"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属公司：">
                        <Input type="text" v-model="form2.companyName" style="width: 100%"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属部门：">
                        <Input type="text" v-model="form2.orgName" style="width: 100%"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="是否兼职：">
                        <RadioGroup v-model="form2.orgType">
                            <Radio label="1">本单位</Radio>
                            <Radio label="2">兼职单位</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col span="8">
                    <div style="float: right">
                        <Button icon="md-search" type="error" style="margin-left: 8px" @click="query">查询</Button>
                        <Button @click="reset" style="margin-left: 8px">重置</Button>
                    </div>
                </Col>
            </Row>
        </Form>

        <Table class="table" no-data-text="没有查询到相关数据!" @on-selection-change="duoxuan" size="small"
               highlight-row stripe border :loading="loading" :columns="columns1" width="100%" height="400" :data="notInListData">
        </Table>
        <Page  :page-size="pagedata.pageSize" :total="pagedata.total" :current="pagedata.currentPage" @on-change="pagechange" :page-size-opts="pageSizeArray"
               @on-page-size-change="pageSizeChange" show-total show-sizer show-elevator />

            <div slot="footer">
                <Button class='ivu-btn-save' :disabled="userIds==''" :loading="buttonLoading" @click="submit()">确定</Button>
                <Button class='ivu-btn-cancel' @click="modelClose">取消</Button>
            </div>
        </Modal>
</template>

<script>
    import {Api} from '../../../api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import {sessionStorage} from '@/common/cacheUtils.js'

    export default {
        components: {cascaderDom},
        props: ['datas','roleId','totalNum1','userForSelectModal'],
        watch:{
            "totalNum1": {
                handler: function (val, oldVal) {
                    this.pagedata.total = val;
                }
            }
        },
        data() {
            return {
                buttonLoading:false,
                loading:false,
                notInListData : this.datas,
                form2:{
                    userName: '',
                    orgType: "1"
                },
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: this.datas.length,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left'
                    },
                   /* {
                    type: 'index',
                    title: '编号',
                    width: 100,
                    align: 'center',
                    fixed: 'left'
                    },*/
                    {
                        title: '姓名',
                        minWidth: 100,
                        align: 'center',
                        key: 'userName'
                    },
                    {
                        title: '登录账号',
                        minWidth: 100,
                        align: 'center',
                        key: 'loginId'
                    },
                    {
                        title: '所属单位',
                        minWidth: 250,
                        align: 'center',
                        key: 'companyName'
                    },   {
                        title: '所属部门',
                        minWidth: 250,
                        align: 'center',
                        key: 'orgName'
                    },{
                        title: '所属岗位',
                        minWidth: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h("span", params.row.position == null?"":params.row.position.positionName);
                        }
                    },
                   /* {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 140,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '12px'
                                    },
                                    on: {
                                        click: () => {
                                            this.save(params.row);
                                        }
                                    }
                                }, '选择')
                            ]);
                        }
                    }*/
                    ],
                dataTable: [],
                userIds:''
            }
        },
        mounted: function() {
        },
        methods: {
            modelClose(){
                this.$emit('closeModel');
            },
            pagechange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            save(row){
                let data = {};
                data.users = row.userId;
                this.$http.get(Api.updateRoleUser + '/' + this.roleId, {params : data}).then(res => {
                    this.$emit('getSelectData');
                    this.$Message.success('成功!');
                    //this.handleReset()
                }).catch(e => {
                    //this.$Message.error('请求失败');
                })
            },
            //查
            query() {
                this.loading = true;
                let data = {
                    fromPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    companyName : sessionStorage('userId').getObject('userId').companyName
                }
                data.roleId = this.roleId;
                data = Object.assign(data,JSON.parse(JSON.stringify(this.form2)));
                this.$http.get(Api.queryUserNotInRole, {params : data}).then(res => {
                    res.data.data.map(i=>{
                        if(i.orgInfo != null) {
                            i.orgName = i.orgInfo.orgName;
                        }
                    });
                    this.notInListData = res.data.data;
                    this.pagedata.total = res.data.total;
                    this.loading = false;
                }).catch(e => {
                    //this.$Message.error('请求失败');
                    this.loading = false;
                })
            },
            reset() {
                this.form2 = {
                    userName: '',
                    orgType: "1"
                }
                this.query();
            },
            setOrgId(data) {
                this.form2.orgId = data[data.length - 1];
            },
            duoxuan(select){
                let userIds=''
                for (let i in select) {
                    userIds+= select[i].userId+','
                }
                userIds=userIds.substring(0, userIds.length - 1);
                this.userIds=userIds
            },


            submit(){
                this.buttonLoading=true
                let data = {};
                data.users = this.userIds;
                this.$http.get(Api.updateRoleUser + '/' + this.roleId, {params : data}).then(res => {
                    this.$emit('getSelectData');
                    this.$Message.success('成功!');
                    this.buttonLoading=false
                    this.$emit('closeModel');
                    this.query()
                }).catch(e => {
                    //this.$Message.error('请求失败');
                })
            },
        }
    }
</script>
